<template>
  <div class="personal-center">
    <iframe 
      :src="iframeSrc" 
      width="100%" 
      :height="iframeHeight"
      frameborder="0">
    </iframe>
  </div>
</template>

<script>
export default {
  name: 'PersonalCenter',
  data() {
    return {
      username: this.$route.query.username || 'test', // 从URL参数获取用户名，默认为'test'
      iframeHeight: window.innerHeight - 100 // 初始高度设置
    }
  },
  computed: {
    iframeSrc() {
      return `http://192.168.3.86:8100/u/${this.username}`
    }
  },
  mounted() {
    // 组件挂载后设置iframe高度
    this.updateIframeHeight();
    
    // 监听窗口大小变化事件
    window.addEventListener('resize', this.updateIframeHeight);
  },
  beforeUnmount() {
    // 组件销毁前移除事件监听器
    window.removeEventListener('resize', this.updateIframeHeight);
  },
  methods: {
    updateIframeHeight() {
      // 设置iframe高度为视口高度减去一些偏移量
      this.iframeHeight = window.innerHeight - 50; // 根据需要调整这个值
    }
  },
  // 监听路由变化，确保参数更新时能及时反映
  watch: {
    '$route.query.username'(newUsername) {
      if (newUsername) {
        this.username = newUsername;
      }
    }
  }
}
</script>

<style scoped>
.personal-center {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.iframe-container {
  width: 100%;
  max-width: 1200px;
}


.personal-center iframe {
  width: 100%;
  height: 88vh;
  margin-top: -50px;
}
</style>